<template>
	<view class="box">
		<view class="list">
			<view class="left" @click="uploadImg">
				<image src="https://s1.ax1x.com/2022/12/05/zynFTx.png" mode=""></image>
			</view>
			<view class="ptp" v-for="(item,index) in images" :key="index">
				<image :src="IMGURL+item.url" mode=""></image>
				<view class="del" @click="del(index)">
					<image class="delimage" src="https://s1.ax1x.com/2022/12/05/zyJBM6.png" mode=""></image>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		IMG
	} from '../../utils/cofing.js'
	export default {
		name: 'uploadImg',
		data() {
			return {
				images: [],
				IMGURL: IMG,
				token: uni.getStorageSync('token')
			}
		},
		methods: {
			async uploadImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log('图片临时路径', tempFilePaths);
						uni.uploadFile({
							url: 'http://estate.eshareedu.cn/estate/api/upload/add', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								console.log(res);
								this.images.push({
									url: res.data
								})
								this.$emit('upload',this.images)
								uni.hideLoading()
								uni.showToast({
									icon: "success",
									title: '上传成功'
								})
							}
						});
					}
				});
			},
			// 清除图片
			del(index){
				this.images.splice(index,1)
				this.$emit('upload',this.images)
			}
		}
	}
</script>

<style lang="less">
	.box {
		width: 730rpx;
		height: 165rpx;
		margin-top: 50rpx;
	}

	.list {
		display: flex;
		margin-top: 80rpx;
		margin-left: 15rpx;

		.left {
			width: 96rpx;
			height: 96rpx;
			border: 1rpx solid #cbcbcb;
			border-radius: 15rpx;
			margin-right: 45rpx;

			image {
				width: 47rpx;
				height: 40rpx;
				margin-top: 25rpx;
				margin-left: 25rpx;
			}
		}

		.ptp {
			width: 96rpx;
			height: 96rpx;
			border-radius: 15rpx;
			margin-right: 45rpx;
			position: relative;
			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 15rpx;
			}
			.del{
				width: 34rpx;
				height: 34rpx;
				background-color: #a3a5a8;
				border-radius: 50%;
				position: absolute;
				top: -18rpx;
				right: -18rpx;
				.delimage{
					width: 25rpx;
					height: 25rpx;
					margin-left: 5rpx;
					margin-bottom:	6rpx;
				}
			}
		}
	}
</style>
